<template>
  <div class="dashboard-container">
    <div class="app-container">

      <el-card class="tree-card">

        <TreeTool :data="company">
          <el-dropdown-item>添加子部门</el-dropdown-item>
        </TreeTool>
        <el-tree v-loading="isLoading" :data="list" :props="{label:'name'}" default-expand-all>
          <template v-slot="{data}">
            <TreeTool :data="data">
              <!-- 把操作拿到父组件 -->
              <el-dropdown-item @click.native="onAdd(data)">添加子部门</el-dropdown-item>
              <el-dropdown-item @click.native="onEdit(data)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="onDel(data.id)">删除部门</el-dropdown-item>

            </TreeTool>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 添加对show-dialog话框组件 -->
    <!-- :visible="showDialog"把父组件的showDialog变量传给子组件 -->
    <!-- .sync修饰符，简化父组件模板，只要传数据
    :xxx="yyy"
    @update:xxx="yyy=$event"
    简化成 :xxx.sync= -->
    <!-- <add-dept :visible="showDialog" @update:visible="showDialog=$event"></add-dept> -->
    <add-dept ref="editRef" :visible.sync="showDialog" :node="currentNode" @success="getDepts"></add-dept>
  </div>
</template>

<script>
import { delDeptsAPI, getDeptsByIdAPI, getDeptsListAPI } from '@/api/departments.js'
import TreeTool from './compoments/tree-tool.vue'
import { translateListToTree } from '@/utils'
import AddDept from './compoments/add-dept.vue'

export default {
  name: 'Department',
  components: { TreeTool, AddDept },
  props: {},
  data() {
    return {
      isLoading: false,
      showDialog: false, // 定义控制对话框显示与否的变量
      company: { name: '', manager: '负责人' },
      list: [],
      currentNode: {}// 当前操作的部门

    }
  },

  created() {
    this.getDepts()
  },
  mounted() {},
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    async getDepts() {
      this.isLoading = true
      const { companyName, depts } = await getDeptsListAPI()
      this.company.name = companyName
      this.list = translateListToTree(depts, '')
      this.isLoading = false
    },
    onAdd(node) {
      console.log('tianjia ')

      this.showDialog = true
      this.currentNode = node
    },
    async onEdit(node) { // 编辑的时候要传node保存当前的节点，这个数据用于表单校验
      console.log('编辑 ')
      // 发请求
      // 父传子：方式一：props(太麻烦，不推荐)，方式二：ref（可以获取到子组件所有的数据变量方法）
      this.currentNode = node// 编辑的时候要传node保存当前的节点，这个数据用于表单校验
      this.$refs.editRef.form = await getDeptsByIdAPI(node.id)
      this.showDialog = true
    },
    onDel(id) {
    // 通过elmec提示代码片段
    // 提示
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
      // 发请求
        await delDeptsAPI(id)
        // 提示成功
        this.$message.success('删除成功')
        // 刷新
        this.getDepts()
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
.el-dropdown-link{
  margin-left: 10px;
}
</style>
